<template>
  <view class="repair_box">
    <view class="repair_item">
      <view class="title">报修类型</view>
      <view class="repair_type">
        <input
          v-model="repairType"
          class="repair_input"
          placeholder="请输入报修类型"
        />
      </view>
    </view>
    <view class="repair_item">
      <view class="title">报修内容</view>
      <view class="repair_text">
        <textarea
          v-model="repair"
          class="repair_content"
          placeholder="请输入报修内容"
        >
        </textarea>
      </view>
    </view>

    <view class="room-btn">
      <view class="btn" @click="repairEscalationInfo">提交</view>
    </view>
  </view>
</template>

<script setup>
import { repairEscalationInfoApi } from "@/package_kuafu_apartment/pages/api/my.js";
import { ref } from "vue";
const repairType = ref("");
const repair = ref("");
async function repairEscalationInfo() {
  if (repairType.value == "") {
    uni.showToast({
      title: "请输入报修类型",
      duration: 1000,
      icon: "none",
    });
  } else if (repair.value == "") {
    uni.showToast({
      title: "请输入报修内容",
      duration: 1000,
      icon: "none",
    });
  } else {
    const res = await repairEscalationInfoApi(repair.value);
    const { code, data } = res || {};
    if (code == 200) {
      await uni.showToast({
        title: "提交成功",
        duration: 2000,
        success: () => {
          repairType.value = "";
          repair.value = "";
        },
      });
    }
  }
}
</script>

<style lang="less" scoped>
.repair_box {
  padding: 30rpx;
  background-color: @color-font;
  .repair_item {
    margin: 30rpx 0;
  }
  .title {
    font-size: @font-size-31;
    font-weight: 500;
    height: 100rpx;
    line-height: 100rpx;
  }
  .repair_type {
    margin-bottom: 30rpx;
  }
  .repair_input {
    border-radius: 20rpx;
    padding: 20rpx;
    padding-right: 0;
    background-color: #eef1f5;
  }
  .repair_text {
    border-radius: 20rpx;
    background-color: #eef1f5;
    .repair_content {
      width: 100%;
      padding: 20rpx;
    }
  }
}
</style>